<template>
  <div class="table-box">
    <ProTable
      ref="proTable"
      title="菜品销售汇总分析"
      row-key="id"
      :show-summary="true"
      :columns="columns"
      :request-api="getPageReport"
      :init-param="initData"
    >
    </ProTable>
  </div>
</template>

<script setup lang="tsx" name="summaryDishSales">
import { ref, reactive } from "vue";
import { Inventory } from "@/api/interface";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { getPageReport } from "@/api/modules/reporting";
import { formatDate } from "@/utils/date-formatter";
import { getFoodCategoryList } from "@/api/modules/goods";
import { getStoreList } from "@/api/modules/operation";

const proTable = ref<ProTableInstance>();
// 新建默认数据
const initData = reactive({
  reportId: 106
});

const columns: ColumnProps<Inventory.ResCustomList>[] = [
  {
    type: "index",
    label: "序号",
    width: 80,
    search: {
      el: "date-picker",
      label: "日期",
      key: "dataTimeRange",
      defaultValue: [formatDate(-1, "start", "yyyy-MM-dd"), formatDate(0, "end", "yyyy-MM-dd")],
      props: {
        type: "datetimerange",
        format: "YYYY-MM-DD",
        valueFormat: "YYYY-MM-DD"
      }
    }
  },
  {
    prop: "storeId",
    label: "门店",
    align: "left",
    isShow: false,
    enum: () => getStoreList({ pageNum: 1, pageSize: 9999 }),
    search: { el: "select" },
    fieldNames: { label: "storeName", value: "id" }
  },
  {
    prop: "foodCategoryId",
    label: "菜品分类",
    minWidth: 120,
    align: "left",
    enum: () => getFoodCategoryList({ pageNum: 1, pageSize: 9999 }),
    search: { el: "tree-select" },
    fieldNames: { label: "name", value: "id" }
  },
  { prop: "foodName", label: "菜品名称", minWidth: 240, align: "left", search: { el: "input" } },
  { prop: "specName", label: "菜品规格", minWidth: 120, align: "left" },
  { prop: "quantity", label: "数量", minWidth: 120, align: "left" },
  { prop: "quantityRate", label: "占分类或总销量的百分比", minWidth: 200, align: "left" },
  { prop: "amount", label: "原金额", minWidth: 120, align: "left" },
  { prop: "amountRate", label: "占分类或总原金额的百分比", minWidth: 210 },
  { prop: "discountAmount", label: "优惠金额", minWidth: 120, align: "left" },
  { prop: "realAmount", label: "实收金额", minWidth: 120, align: "left" },
  { prop: "realAmountRate", label: "占分类或总实收金额的百分比", minWidth: 220, align: "left" },
  { prop: "orderQuantity", label: "销售账单数", minWidth: 120, align: "left" }
];
</script>
